<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>旅游活动</title>
    <link rel="stylesheet" href="css/vant.css">
    <link rel="stylesheet" href="css/submitOrder.css">

    <style>
        .travelImg {
            width: 100%;
        }

        #app {
            padding: 0px !important;
        }

        .addressBox {
            margin: .2667rem auto;
        }

        .btn {
            position: absolute;
            bottom: .2667rem;
            left: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: .4533rem auto;
            width: 4rem;
            height: 1.1733rem;
            background: linear-gradient(0deg, #FF3B14, #FF7E64);
            box-shadow: 0rem .04rem .0933rem 0rem #FF876F;
            border-radius: .5867rem;
            font-size: .48rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: .5333rem;
            -webkit-border-radius: .5867rem;
            -moz-border-radius: .5867rem;
            -ms-border-radius: .5867rem;
            -o-border-radius: .5867rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="addressBox">
            <template v-if="userInfo.userName!=''">
                <div>
                    <span>{{userInfo.userName}}</span>
                    <span>{{userInfo.telNumber}}</span>
                </div>
                <div>
                    {{userInfo.address}}
                </div>
            </template>
            <template v-else>
                <div class="addressTip" @click="gatAddress">
                    点击设置旅游券收货地址
                </div>
            </template>
        </div>

        
        <img src="./img/travel.jpg" class="travelImg" alt="" @click="addressConfirm">


        <!-- 按钮 -->
        <div class="btn" @click="downHandle">
            下载APP查看
        </div>



        <!-- 支付成功 弹窗 开始 -->
        <div class="successDialog" v-if="payStatus">
            <div class="topBox">
                <img src="img/distribution/successimg.png" alt="">
                <span>支付成功</span>
                <span>详细信息请在APP内查看</span>
                <div @click="downHandle">立即下载</div>
            </div>
        </div>
        <!-- 支付成功 弹窗 结束 -->

        <div class="mask" v-if="mask">
            <img src="img/load.gif">
        </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ajax.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                userInfo: {
                    userName: '',
                    telNumber: '',
                    address: '',
                },
                payStatus: false,
                rulesObj: {},
                isShowAddress: false,
                money: 500
            },
            created() {

            },
            methods: {
                addressConfirm() {
                    if (this.userInfo.userName == '') {
                        this.$toast('请输入收件人')
                        return
                    } else if (this.userInfo.telNumber == '') {
                        this.$toast('请输入收件电话')
                        return
                    } else if (this.userInfo.address == '') {
                        this.$toast('请输入收件地址')
                        return
                    }

                    var that = this;

                    console.log(this.userInfo);

                    that.mask = true

                    ajax({
                        url: newUrl + 'tour/addTourQuota',
                        type: 'POST',
                        data: {
                            userId: sessionStorage.userId,
                            shopId: sessionStorage.shopId,
                            obtainMethod: 2,
                            applyStatus: 1,
                            consignee: that.userInfo.userName,
                            phoneNumber: that.userInfo.telNumber,
                            address: that.userInfo.address,
                            rechargeMoney: that.money,
                            flag: 'add',
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            that.mask = false
                            if (res.flag) {
                                console.log(res);
                                that.payHandle()
                            }
                        }
                    })
                },



                payHandle() {
                    this.mask = true
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "tour/payTour",
                        data: {
                            userId: sessionStorage.userId,
                            flag: 1,
                            realMoney: that.money,
                            openId: sessionStorage.openId,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                console.log(res);
                                onBridgeReady(res.data.finalPackage)
                            }
                        }
                    })
                },


                // 获取地址
                gatAddress() {
                    var _this = this;
                    _this.mask = true
                    var url = location.href.split('#')[0];
                    ajax({
                        type: "post",
                        url: newUrl + "share/share",
                        data: {
                            url: url
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            console.log(res)
                            var datas = res.data
                            _this.mask = false;
                            wx.config({
                                debug: false,
                                appId: datas.appId,
                                timestamp: datas.timestamp,
                                nonceStr: datas.nonceStr,
                                signature: datas.sign,
                                jsApiList: [
                                    'checkJsApi',
                                    'openAddress'
                                ]
                            });

                            wx.ready(function () {
                                wx.openAddress({
                                    success: function (res) {
                                        var str = res.provinceName + res.cityName + res.countryName + res.detailInfo
                                        _this.userInfo = {
                                            userName: res.userName,
                                            telNumber: res.telNumber,
                                            address: str,
                                        }
                                    }
                                });
                            })
                            wx.error(function (res) {
                                // alert(JSON.stringify(res))

                            })
                        }
                    })




                },


                // 立即下载
                downHandle() {
                    window.location.replace("newDown.html")
                },
            }
        })


        function wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        }

        function onBridgeReady(data) {
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入
                "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": data.nonceStr, //随机串
                "package": data.package,
                "paySign": data.paySign, //微信签名
                "signType": data.signType //微信签名方式：
            },
                function (res) {
                    // 支付成功
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        vm.payStatus = true
                        alert('支付成功')
                    }
                    // 支付过程中用户取消
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('已取消支付')
                    }
                    // 支付失败
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失败')
                    }
                    if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                    }
                });
        }

    </script>

</body>

</html>